<template>
	<view class="wrap" style="margin-left: 15rpx;margin-right: 15rpx;">
		<view class="search">
			<u-search v-model="query.keywords" @custom="search" @search="search"  height="80" placeholder="请输入流程标识/流程名称"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true"  style="width: 100%; height: 87%; margin-top: 5rpx;margin-bottom: 5rpx;" @scrolltolower="loadMore">
			<view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;margin-bottom: 5rpx;padding-left: 12rpx;padding-right: 12rpx;" @click="handleClick(item)">
				<u-row gutter="16" style="margin-top: 20rpx;">
					<u-col span="9" style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:bold">
						{{item.processName}}
					</u-col>
					<u-col span="3" style="text-align: right;">
						<view style="text-align: right;color: gray;margin-right: 10rpx;">
							<u-tag :text="'激活'" shape="square" type="warning" v-if="item.suspended===false"></u-tag>
							<u-tag :text="'挂起'" shape="square" type="danger" v-else-if="item.suspended!==false"></u-tag>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-top: 20rpx;">
					<u-col span="12" style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;color:gray">
						流程标识：{{item.processKey}}</br>
						流程分类：{{item.category}}</br>
						流程版本：{{item.version}}
					</u-col>
				</u-row>
				<u-row gutter="16" style="margin-top: 20rpx;margin-bottom: 10rpx;margin-right: 5rpx;">
					<u-col span="6" >
						<view style="text-align: left;color: gray;">
							{{item.deploymentTime}}
						</view>
					</u-col>
					<u-col span="6" style="text-align: right;">
						<u-button v-if="checkButtonPermission('work_flow_start')" size="mini" :border="false" plain style="color:blue" @click="handleStart(item)">发起</u-button>
					</u-col>
				</u-row>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
		</scroll-view>
	</view>
</template>
<script>
	import $time from '@/common/time.js';
	export default {
		data() {
			return {
				query: {
					current: 1,
					size: 10,
					keywords: '',
				},
				list: [],
				pages: 0,
				loadStatus: 'loadmore',
				options: [],
				headStyle: {
					fontWeight: 'bold',
					color: '#606266',
					margin: '16rpx'
				},
				statusList: [],
				swiperCurrent:0,
				dropdown:{
					borderBottom: false,
					activeColor: '#2979ff',
					mask: true,
				},
			};
		},
		onLoad(params) {
			if(params.createUser){
				this.query.createUser=params.createUser;
			}
			this.loadList();
		},
		computed:{
			
		},
		methods: {
			checkButtonPermission(code) {
				return this.hasPermission(code);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.loadList();
			},
			loadList() {
				this.$u.api.wflow.process.listProcess(this.query).then(res => {
					if (!res.data.records || res.data.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					res.data.records.forEach((item) => {
						item.show=false;
					})
					this.list = this.list.concat(res.data.records);
					this.pages = res.pages;
					this.query.current = res.data.current;
					this.query.size = res.data.size;
					this.loadStatus = "loadmore";
				});
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			handleClick(row){
				this.navTo('form?id='+row.id);
			},
			handleStart(row) {
				let deployId = row.deploymentId;
				let definitionId = row.definitionId;
				let procInsId = 0;
				this.$u.route({
					url: 'pages/flowableplus/work/comp/start',
					params: {
						deployId,
						definitionId,
						procInsId
					},
				})
			},
		}
	};

</script>
<style lang="scss">
@import '../../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
}
.search{
	height:55px;
	background-color: #ffffff;
	background-size: 450px;
}
.uni-title{
	font-size: 30rpx;
	color: #333333;
	padding: 10px;
	background: #fff;
	border-top:1px solid #ededed;
	margin-top: 20rpx;
}
.uni-media-list {
    padding: 15px 15px;

}
.uni-media-list-body {
    height: 60px;
	padding-left:20rpx;
	border-left:thick double #D5D5D5;
	border-width: 1px;
}
.uni-media-list-text-top{
	width: 100%;
	line-height: 35rpx;
	font-size: 28rpx;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-content {
    width: 100%;
    line-height: 35rpx;
    font-size: 22rpx;
	color: darkgray;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-text-bottom {
    width: 100%;
    line-height: 24rpx;
    font-size: 26rpx;
	color: #666666;
	text-align: right;
	span{
		margin-right: 10rpx;
	}
}
.uni-media-list-right {
    height: 60px;
	padding-left:20rpx;
	transform: translateY(40%) translateX(50%)
}
.btn-plus {
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
		z-index: 1;
		opacity: 0.6;
	}

.btn-plus:hover {
	opacity: 1;
}


</style>